<template>
	<view class="content">
		<up-navbar fixed :safeAreaInsetTop="true" :placeholder="true">
			<template #left>
				<view class="u-nav-slot">
					<image src="http://106.53.65.140:8080/upload/9e2ddb06-8417-4fb7-9743-1796ff5aace2.jpg"
						mode="scaleToFill" class="page_logo" />
				</view>
			</template>
			<template #center>
				<view class="u-nav-slot-center">
					<up-search placeholder="" v-model="state.keyword" :showAction="false"></up-search>
				</view>
			</template>
		</up-navbar>
		<view class="head-wrap">
			<view class="head-wrap-action" @click="toPage('/pages/index/send')">
				<image src="@/static/images/index/send_1.png" mode="scaleToFill" style="width: 100%;height: 100%;" />
			</view>
			<view class="head-wrap-action" style="margin-left: -12px" @click="toPage('/pages/index/settled')">
				<image src="@/static/images/index/settled_1.png" mode="scaleToFill" style="width: 100%;height: 100%;" />
			</view>
		</view>
		<view class="filter-wrap">
			<u-dropdown ref="uDropdownRef" @open="open" @close="close">
				<u-dropdown-item v-model="state.filter.city" title="所在地区">
					<slot>
						<view class="dropworn-slot-wrap">
							<up-search v-model="state.search_city" @custom="onCityChange"></up-search>
							<view style="height: 375rpx;padding:12px;z-index:999">
								<up-list @scrolltolower="scrolltolower">
									<up-list-item v-for="(item, index) in state.citylist" :key="index">
										<up-cell :title="item.label" @click="onSelect(item)">
										</up-cell>
									</up-list-item>
								</up-list>
							</view>
						</view>
					</slot>
				</u-dropdown-item>
				<u-dropdown-item v-model="state.filter.jobGroupId" title="角色分类"
					:options="state.options1"></u-dropdown-item>
				<u-dropdown-item v-model="state.filter.educationTypeId" title="学历"
					:options="state.options2"></u-dropdown-item>
			</u-dropdown>
		</view>

		<view class="list-wrap" v-if="state.list.length">
			<view class="list-wrap-item" v-for="(item,index) in state.list" :key="index"
				@click="toPage(`/pages/demand/detail?info=${JSON.stringify(item)}`)">
				<view class="list-wrap-item-info">
					<view class="list-wrap-item-info-left">
						<view class="name1">{{ item.name }}</view>
						<view class="name2">{{ item.corporateName }}</view>
					</view>
					<view class="list-wrap-item-info-right">
						<view class="name1">{{ item.jobGroupName }}</view>
						<view class="name2">¥{{item.budgetAmount}}</view>
					</view>
				</view>
				<view class="list-wrap-item-list">
					<text class="text" v-if="item.userTrue">实名已认证</text>
					<text class="text" v-if="item.usereDucationTrue">学历已认证</text>
					<text class="text" v-if="item.blurbTrue">简历已认证</text>
				</view>
			</view>
		</view>
		<up-empty v-else mode="data"></up-empty>
	</view>
</template>

<script setup>
import { onShow, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app"
import { ref, onMounted, reactive, getCurrentInstance, watch } from "vue"
import city from '../../../config/city'

const { proxy } = getCurrentInstance()

const uDropdownRef = ref('')

const state = reactive({
	search_city: '',
	citylist: flatten(city),
	searchcitylist: flatten(city),
	keyword: '',
	list: [],
	filter: {
		areaCode: "",
		educationTypeId: "",
		jobGroupId: "",
		pageIndex: 1,
		pageSize: 10
	},
	totalSize: 0,
	options1: [],
	options2: [],
	isSend: -1
})

function flatten(arr) {
	return arr.reduce((result, item) => {
		if (Array.isArray(item.children)) {
			result = result.concat(item.children);
		} else {
			result.push(item);
		}
		return result;
	}, []);
}

function open(index) {
	// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
	// 同时内部会自动给当前展开项进行高亮
	uDropdownRef.value?.highlight();
}
function close(index) {
	// 关闭的时候，给当前项加上高亮
	// 当然，您也可以通过监听dropdown-item的@change事件进行处理
	uDropdownRef.value?.highlight(index);
}
function change() {
	// 更多的细节，如有需要请自行根据业务逻辑进行处理
	// this.$refs.uDropdownRef.highlight(xxx);
}
function onCityChange(e) {
	const result = state.searchcitylist.filter(item => item.label.indexOf(e) !== -1)
	state.citylist = result
}
function searchCity() {

}
function onSelect(item) {
	state.filter.areaCode = item.value
	uDropdownRef.value?.close()
	fetchData()
}
async function getJobGroupList() {
	const res = await proxy.request('/job/get/group/list', {}, {
		method: 'GET'
	})

	state.options1 = res.data.data.map(item => {
		return {
			label: item.name,
			value: item.id
		}
	})
}

async function getDictList() {
	const res = await proxy.request('/dict/getList', { dictCode: 'educationType' }, {
		method: 'GET'
	})
	state.options2 = res.data.data.map(item => {
		return {
			label: item.dictName,
			value: item.id
		}
	})
}
async function fetchData() {
	if (!state.filter.areaCode) {
		delete state.filter.areaCode
	}
	if (!state.filter.educationTypeId) {
		delete state.filter.educationTypeId
	}
	if (!state.filter.jobGroupId) {
		delete state.filter.jobGroupId
	}
	const res = await proxy.request('/workitem/get/xqlist', state.filter, {
		method: "GET"
	})
	const { dataList, pageIndex, pageSize, totalSize } = res.data.data
	if (state.filter.pageIndex == 1) {
		state.list = dataList
	} else {
		state.list = [...state.list, ...dataList]
	}
	state.filter.pageIndex = pageIndex
	state.filter.pageSize = pageSize
	state.totalSize = totalSize
}
async function getFirmInfo() {
	const res = await proxy.request('/enterprise/auth/get', {}, { method: 'GET' })
	if (res.data.data && res.data.data.id) {
		if (res.data.data.state == 1) {
			state.isSend = 1
		} else if (res.data.data.state == 2) {
			state.isSend = 2
		} else {
			state.isSend = 0
		}
	}
}
function toPage(url) {
	const token = uni.getStorageSync('token')
	if (!token) {
		uni.reLaunch({ url: '/pages/login' })
		return
	}
	if (url == '/pages/index/send') {
		if (state.isSend == -1) {
			uni.$u.toast('您还没有进行企业认证，请前往我的-企业认证进行认证')
			return
		}
		if (state.isSend == 0) {
			uni.$u.toast('您申请的企业认证还未通过')
			return
		}
		if (state.isSend == 2) {
			uni.$u.toast('您申请的企业认证审核不通过')
			return
		}
	}
	uni.navigateTo({
		url
	})
}
onShow(() => {
	getJobGroupList()
	getDictList()
	fetchData()
	getFirmInfo()
})

onReachBottom(() => {
	// 加判断： 页码数 * 每一页获取数据的条数 >= 总条数，如果符合条件说明数据已经全部加载完毕
	if (state.filter.pageIndex * state.filter.pageSize >= state.totalSize) {
		uni.showToast({
			title: '已经到底咯~',
			icon: 'none',
		});
		return;
	} else {
		state.filter.pageIndex++; // 每触发一次触底事件，页码加1
		fetchData()
	}
})
onMounted(() => {
	// getJobGroupList()
})

onPullDownRefresh(async () => {
	await fetchData()
	uni.stopPullDownRefresh()

})

watch(() => [state.filter.jobGroupId, state.filter.educationTypeId], () => {
	fetchData()
})
</script>
<style lang="scss">
page {
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
::v-deep .u-navbar--fixed.data-v-9d9e7ee2 {
	z-index: 99 !important;
}

.u-nav-slot-center {
	width: 330rpx;
}

::v-deep .u-cell-group__wrapper {
	max-height: 800rpx;
}

.page_logo {
	width: 144rpx;
	height: 48rpx;
}

.head-wrap {
	margin-top: 12rpx;
	display: flex;
	width: 100%;
	padding: 32rpx;
	box-sizing: border-box;

	&-action {
		width: 352rpx;
		height: 128rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
}

.filter-wrap {
	width: 100%;
	height: 106rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;

	.dropworn-slot-wrap {
		padding: 24rpx;
		background-color: #FFFFFF;
	}
}

.list-wrap {
	margin-top: 32rpx;
	padding: 0 32rpx 32rpx;

	&-item {
		position: relative;
		width: 686rpx;
		height: 198rpx;
		padding: 20rpx;
		background: #FFFFFF;
		margin-bottom: 32rpx;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(222, 222, 222, 0.25);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;

		&-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100rpx;

			&-left {
				.name1 {
					width: 100%;
					height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #323232;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.name2 {
					width: 312rpx;
					height: 34rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #A09D9D;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			&-right {
				.name1 {
					width: 100%;
					height: 34rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #323232;
					line-height: 34rpx;
					text-align: right;
					font-style: normal;
					text-transform: none;
				}

				.name2 {
					width: 154rpx;
					height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #F2CB51;
					line-height: 40rpx;
					text-align: right;
					font-style: normal;
					text-transform: none;
				}
			}
		}

		&-list {
			display: flex;
			align-items: center;
			margin-top: 14rpx;

			.text {
				margin-right: 20rpx;
				width: 136rpx;
				height: 42rpx;
				text-align: center;
				line-height: 42rpx;
				background: rgba(206, 206, 206, 0.4);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #6D6D6D;
				font-style: normal;
				text-transform: none;
			}
		}
	}
}
</style>
